<template>
                <ul class="infinite-list" >
                    <li v-for="item in orders"  class="infinite-list-item">
                        <div class="container">
                            <!-- :src="item.image" -->
                            <el-avatar shape="square" :size="50" :src="item.image" class="avatar" />
<!--                            <el-avatar shape="square" :size="50" src="../../public/img/merchant.jpg" class="avatar" />-->
                            <span class="custom-span">{{item.shopName}}</span>
<!--                            <span class="custom-span">重庆小面</span>-->
                        </div>
                        <span style="margin-right: 10px">￥{{item.amount}}</span>
                        <div class="button-container">
                            <el-button type="primary" :icon="Edit" @click="btnComment(item.id)"></el-button>
                            <el-dialog v-model="dialogVisible" title="填写评价信息">
                                <table>
                                    <tr>
                                        <td class="custom-td">图片</td>
                                        <td class="custom-td">名称</td>
                                        <td class="custom-td">数量</td>
                                        <td class="custom-td">金额</td>
                                        <td class="custom-td">星级</td>
                                        <td class="custom-td">评价</td>
                                        <td class="custom-td">操作</td>
                                    </tr>
                                    <tr v-for="(detail,num) in orderDetail">
                                        <!--未进行回显-->
                                        <!-- :src="detail.image" -->
                                        <td class="custom-td">
                                            <el-avatar shape="square" :size="30" :src="detail.image" class="avatar" />
                                        </td>
                                        <td class="custom-td">{{detail.name}}</td>
                                        <td class="custom-td">{{detail.number}}</td>
                                        <td class="custom-td">{{detail.amount}}</td>
                                        <!-- 打星，允许半星，可能对应double -->
                                        <td class="custom-td"><el-rate v-model="value[num]" /></td>
                                        <td class="custom-td"><input v-model="comment[num]" type="text" placeholder="请输入评价内容"></td>
                                        <td class="custom-td"><el-button type="primary" @click="submitCom(detail.dishId,detail.image,comment[num])">提交</el-button></td>
                                    </tr>
                                </table>
                                <br>
                            </el-dialog>
                            <el-button type="danger" :icon="Delete" @click="open(item.id)"></el-button>
                        </div>
                    </li>
                    <li class="infinite-list-item2">
                        <tr v-for="detail in orderDetail">
                            <td class="custom-td2">
                                <el-avatar shape="square" :size="40" :src="detail.image" class="avatar" />
                            </td>

                            <td class="custom-td2"> x{{detail.number}}</td>
                        </tr>
                    </li>
                </ul>



</template>

<script setup>
    import { ref ,onMounted} from 'vue'
    import {getOrderDetail, getOrders} from "../api/order";
    import {deleteMyOrder} from "../api/order";
    import {submitComment} from '../api/comment'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import {getMerchant} from "../api/merchant";
    import {
        Bell,ChatLineSquare,Search,Edit,Delete,List
    } from '@element-plus/icons-vue'

    const search=ref('')
    const orders=ref([])
    const orderDetail=ref([])

    const merchant=ref([])
    const comment=ref([])
    let dialogVisible=ref(false)
    const value=ref([])


    //点击进入评论，显示所有详情
    const btnComment=(id)=>{
        dialogVisible.value=true;
        getOrderDetail({id:id}).then(res=>{
            orderDetail.value=[]
            for(let i=0;i<res.data.length;i++){
                orderDetail.value.push(res.data[i])
                console.log(orderDetail.value[i])
            }
        })
    }

    const submitCom=(dishId,image,comment)=>{
        //测试用userId
        const data={dishId:dishId,userId:1,image:image,description:comment}
        console.log(comment)
        submitComment(data).then(res=>{
            console.log(res.data)
        })
    }

    //增加用户id
    onMounted(()=>{
        //传入数组，测试默认用户1
        const data={id:1};

        getOrders(data).then((res)=>{
            //resd是一整个数组
            const resd=res.data;
            for(let i=0;i<resd.length;i++){
                orders.value.push(resd[i])
                console.log(orders.value[i])
                // orders.value[i].orderId=orders.value[i].id
                //获取该订单id所有对应的商品
                getOrderDetail({id:resd[i].id}).then(res=>{
                    orderDetail.value=[]
                    for(let i=0;i<res.data.length;i++){
                        orderDetail.value.push(res.data[i])
                        console.log(orderDetail.value[i])
                    }
                })

                console.log("merchantId"+resd[i].merchantId)
                //获取该店家信息
                getMerchant({merchantId:resd[i].merchantId}).then((msg)=>{
                    console.log(msg.data)
                    orders.value[i].shopName=msg.data.shopName
                    console.log(orders.value[i].shopName)
                    orders.value[i].merchantImage=msg.data.image
                })
                console.log(orders.value[i])
            }
        })
    })

    const open = (id) => {
        ElMessageBox.confirm(
            '订单删除后将不可恢复，确认删除此订单?',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                console.log(id);
                deleteMyOrder({id:id})
                ElMessage({
                    type: 'success',
                    message: '成功删除订单',
                })
                location.reload(); // 刷新页面
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除订单',
                })
            })
    }



</script>
<style>
    .infinite-list {
        height: 200px;
        width:50%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .infinite-list .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120px;
        width:100%;
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
    }

    .infinite-list .infinite-list-item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        width:100%;
        background: var(--el-color-primary-light-9);
    }

    .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
    }

    .page-order {
        padding: 20px;
    }


    .custom-span {
        flex-grow: 1;
        text-align: center;
        display: inline-block;
        padding: 5px;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        border-radius: 4px;
    }

    .avatar {
        margin-right: 10px;
    }
    .container {
        display: flex;
        align-items: center;
    }
    .custom-td {
        padding: 5px;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        text-align: center;
        font-weight: bold;
        color: #333;
    }
    .custom-td2 {
        text-align: center;
        font-weight: bold;
        color: #333;
    }
    .button-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
</style>